<template>
  <!-- switch-开关组件(自定义) -->
  <span @click.stop>
    <el-switch v-model="status" :class="{inline:inline}" :disabled="disabled"
      :active-color="colors[0]" :inactive-color="colors[1]" :width="width"
      :active-value="values[0]" :inactive-value="values[1]"
      :active-text="texts[0]" :inactive-text="texts[1]"
      @change="changeHandle" />
  </span>
</template>
<script>
export default {
  name: 'cSwitch',
  model: {
    // prop: 'value',
    event: 'change'
  },
  props: {
    value: null, // 当前值
    colors: { // 定义颜色
      type: Array,
      default: () => {
        // return ['#13ce66', '#ff4949']
        return []
      }
    },
    values: { // 定义值
      type: Array,
      default: () => {
        return []
      }
    },
    texts: { // 定义文本
      type: Array,
      default: () => {
        return []
      }
    },
    disabled: Boolean, // 是否禁用
    width: Number, // 宽度
    inline: Boolean // 是否为内联模式
  },
  data() {
    return {
      status: this.value
    }
  },
  created() {
  },
  methods: {
    changeHandle(val) {
      this.$emit('change', val)
    }
  },
  filters: {

  },
  watch: {
    value(val) {
      this.status = val
    }
  }
}
</script>
<style lang="scss" scoped>
  //table switch 自定义 覆盖2.0 el-switch css
.inline ::v-deep{
  .el-switch__core{
    z-index: 1;
  }
  .el-switch__label--left{
    position: absolute;
    right: 5px;
    top: 0;
    display: none;
    z-index: 2;
  }
  .el-switch__label--right{
    position: absolute;
    left: 5px;
    top: 0;
    display: none;
    z-index: 2;
  }
  .el-switch__label.is-active{
    color: #fff;
    margin: 0;
    display: block;
  }
}
</style>
